<script setup>
import { ref } from 'vue'
import { Loading, Close } from "@element-plus/icons-vue"

const data = defineProps({
  name: String,
  iconUrl: String
})

const emit = defineEmits(['delete']) // 添加事件触发器
</script>

<template>
  <div class="tiny-card">
    <!-- 删除按钮 -->
    <el-icon class="delete-icon" @click.stop="emit('delete')">
      <Close />
    </el-icon>

    <!-- 原有图片展示 -->
    <el-image
        v-if="data.iconUrl"
        :src="data.iconUrl"
        alt="icon"
        class="tiny-icon"
    >
      <template #error>
        <el-icon style="display: flex;justify-content: center;align-items: center"><Loading /></el-icon>
      </template>
    </el-image>

    <!-- 原有名称展示 -->
    <span class="tiny-name">{{ data.name }}</span>
  </div>
</template>

<style scoped>
/* 原有样式保留 */

.tiny-card {
  width: 100px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid #eee;
  box-sizing: border-box;
  position: relative; /* ✅ 为了放置删除按钮 */
}

.tiny-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  flex-shrink: 0;
}

.tiny-name {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ✅ 新增删除按钮样式 */
.delete-icon {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 14px;
  color: #aaa;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.tiny-card:hover .delete-icon {
  opacity: 1;
}

.delete-icon:hover {
  color: #f56c6c;
}
</style>
